<template>
  <div class="ta-upload">
    <img :src="cover?cover:de" class="img">
    <div class="upload">
      <p class="uploadTip">支持大小 2M 以内的图片</p>
      <el-upload
        :action="qiniuPrefix"
        :show-file-list="false"
        :data="{token: qiniuToken}"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
          <el-button
            size="small" type="primary" :loading="isUploading">
            {{ isUploading ? '正在上传' : '点击上传' }}
          </el-button>
      </el-upload>
    </div>
    <!-- <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt>
    </el-dialog> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'iUpload',
  data() {
    return {
      isUploading: false,
      de: 'http://7xrgfl.com1.z0.glb.clouddn.com/FrigRdXWG0V6VjtkfYxXVfzD-1rr'
    }
  },
  props: {
    cover: {
      type: String,
      default: 'http://7xrgfl.com1.z0.glb.clouddn.com/FrigRdXWG0V6VjtkfYxXVfzD-1rr'
    }
  },
  computed: {
    ...mapGetters([
      'qiniuToken',
      'qiniuPrefix',
      'qiniuUpload'
    ])
  },
  created() {
    this.$store.dispatch('GetQiniuToken')
  },
  methods: {
    handleAvatarSuccess(res, file) {
      // this.qiniuImg = URL.createObjectURL(file.raw)
      const avatar = this.qiniuUpload + res.hash
      // this.$store.commit('SET_AVATAR', avatar)
      this.$emit('success', avatar)
      this.$message('图片上传成功', 'success')
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!file.type || !/image/.test(file.type)) {
        this.$message.error('只允许上传图片')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
    }
    // async uploadFile(file) {
    //   this.isUploading = true
    //   try {
    //     const res = await this.$store.UploadImage(file, this.qiniuToken)
    //     this.$message('图片上传成功', 'success')
    //     this.$emit('success', res)
    //   } catch (err) {
    //     this.$message(err.message, 'error')
    //   } finally {
    //     this.isUploading = false
    //   }
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.ta-upload {
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
    .img {
      min-width: 75px;
      height: 75px;
      float: left;
    }
    .upload {
      float: left;
      margin-left: 8px;
      height: 75px;
      .uploadTip {
        color: #888;
        font-size: 12px;
      }
    }
}
</style>
